<template>
	<view :style="theme">
		<view style="padding: 0 20rpx 0 30rpx;">
			<u--form labelPosition="left" labelWidth="7em" :model="model1">
				<u-form-item label="姓名：" borderBottom required prop="name">
					<u--input v-model="model1.name" border="none" placeholder="请输入姓名" maxlength="20" clearable>
					</u--input>
				</u-form-item>
				<u-form-item label="性别：" borderBottom required prop="sex">
					<u-radio-group v-model="model1.sex" placement="row">
						<u-radio name="1" label="男" :customStyle="{marginRight: '20rpx'}"></u-radio>
						<u-radio name="2" label="女" :customStyle="{marginRight: '20rpx'}"></u-radio>
						<u-radio name="0" label="保密"></u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="出生日期：" borderBottom prop="birthday" @click="xzDate">
					<u--input v-model="model1.birthday" border="none" placeholder="请选择出生日期" maxlength="10" readonly>
					</u--input>
				</u-form-item>
				<u-form-item label="身份证号：" borderBottom prop="idCard">
					<u--input v-model="model1.idCard" type="idcard" border="none" placeholder="请输入身份证号" maxlength="18" clearable>
					</u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="tips flex-c">
		<!-- 	<image :src="imgHost+'/xueyuan_ic_tips.png'"></image> -->
			<u-icon name="info-circle" :color="color" size="24rpx" />
			<text>为顺利报名，请确保录入的姓名与证件上保持一致。{{venueName}}将通过加密等方式保护您录入的身份信息</text>
		</view>
		<view class="box_footer_agree">
			<view class="checkboxBox" :class="isActive?'on':''" @click="isTy"><u-icon v-if="isActive" name="checkmark-circle-fill" size="40rpx"></u-icon></view>
			<view>点击即视为同意<text @click='showxy'>《隐私协议》</text></view>
		</view>
		<view class="bottomState">
			<view @click="$noMultipleClicks(submit)">提交</view>
		</view>
		<u-popup :show="agreement" @close="closeBtn" mode="center" round="20rpx">
			<view class="agreement">
				<view class="agreement_bt">隐私协议</view>
				<scroll-view class="swiper-scroll" scroll-y="true">
					<u-parse :content="xy"></u-parse>
				</scroll-view>
				<view class="agreement_foot flex">
					<view style="opacity: 1" @click='closeBtn'>确定</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker ref="datetimePicker" :show="show" v-model="value1" :minDate="minDate" :maxDate="maxDate" mode="date"
			:formatter="formatter" @cancel="cancel" @confirm="confirm">></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				color: `var(--color)`,
				noClick: true,
				model1: {
					sex: '1'
				},
				value1: Number(new Date()),
				minDate: new Date('1920/01/01').getTime(),
				maxDate: Number(new Date()),
				show: false,
				isActive: false,
				agreement: false,
				xy: '',
				id: ''
			}
		},
		onLoad(ops) {
			if (ops.id) {
				uni.setNavigationBarTitle({
					title: '编辑报名人员'
				})
				this.model1 = {
					name: ops.xyname,
					idCard: ops.idCard&&ops.idCard!='undefined'?ops.idCard:'',
					birthday: ops.birthday&&ops.birthday!='undefined'?ops.birthday:'',
					id: ops.id,
					sex: ops.sex
				}
				this.value1 = Number(ops.currentDate)
			} else {
				uni.setNavigationBarTitle({
					title: '新增报名人员'
				})
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			jump(url, params, a) {
				this.$app.jump(url, params, a);
			},
			jump2(url, params, a) {
				this.$app.jump2(url, params, a);
			},
			showxy() {
				this.getYx()
			},
			closeBtn() {
				this.agreement = false
			},
			getYx() {
				this.$app.ajax({
					data: {
						param: {
							type: '15',
							code: 'AGREEMENT_USER'
						}
					},
					api: this.$api.paymentConfiguration()
				}).then((res) => {
					if (res.errorCode === '000000') {
						this.xy = res.recordList[0].value
						this.agreement = true
					}
				}).catch(() => {})
			},
			isTy() {
				this.isActive = !this.isActive
			},
			xzDate() {
				this.show = true
			},
			cancel() {
				this.show = false
				this.model1.birthday = ''
			},
			confirm(e) {
				this.show = false
				this.model1.birthday = this.formatDate(e.value)
			},
			submit() {
				if (!this.isActive) {
					this.$app.showToast('请先同意协议')
					return false
				}
				if (!this.model1.name) {
					this.$app.showToast('请输入姓名')
					return false
				}
				// if (!this.model1.birthday) {
				// 	this.$app.showToast('请选择出生日期')
				// 	return false
				// }
				// if (!this.model1.idCard) {
				// 	this.$app.showToast('请输入身份证号')
				// 	return false
				// }
				if (this.model1.idCard && this.model1.idCard.length != 18) {
					this.$app.showToast('请输入正确身份证号')
					return false
				}
				let param = {
					...this.model1
				}
				this.$app.ajax({
					data: {
						userId: this.userInfo.id,
						param
					},
					api: this.$api.studentAdd()
				}).then((res) => {
					if (res.errorCode == '000000') {
						if (this.model1.id) {
							this.$app.showToast('编辑成功')
						} else {
							this.$app.showToast('添加成功')
						}
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				}).catch(() => {})
			},
			calculation(s) {
				return s < 10 ? '0' + s : s
			},
			formatDate(date) {
				var date = new Date(date)
				const year = date.getFullYear() + '-'
				const month = this.calculation(date.getMonth() + 1) + '-'
				const day = this.calculation(date.getDate())
				return year + month + day
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			}

		}

	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style scoped lang="scss">
	.tips {
		color: $color;
		font-size: 24rpx;
		padding: 30rpx;
		line-height: 1.5;
	}

	.tips image {
		width: 28rpx;
		margin-right: 10rpx;
		height: 28rpx;
		display: inline-block;
		margin-top: -30rpx;
	}

	.tips text {
		flex: 1;
	}

	.box_footer_agree {
		display: flex;
		padding: 0 30rpx;
		margin-top: 20rpx;
		align-items: center;
	}

	.box_footer_agree text {
		color: #333333;
		font-size: 26rpx;
		margin-left: 5rpx;
		color: $color;
	}

	.bottomState {
		width: 100%;
		padding: 16rpx 30rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 999;
		box-sizing: border-box;
		overflow: hidden;

		view {
			height: 100rpx;
			text-align: center;
			color: #fff;
			background-color: $color;
			font-size: 30rpx;
			border-radius: 10rpx;
			line-height: 100rpx;
		}
	}
</style>
